<template>
  <div class="ccw" v-if="ppData.name" :id="componentId">
    <div class="title">{{title}}</div>
    <div class="ccw-search-panel">
      <div class="panel-top">
        <span class="s_pinpai" id="s_pinpai" @click="showSelectPinPai" v-if="curChildSelect.id">{{curSelect.pp_name}}--{{curChildSelect.name}}</span>
        <span class="s_pinpai" id="s_pinpai" @click="showSelectPinPai" v-if="!curChildSelect.id">选择品牌</span>
        <span class="s_buy" id="s_buy" @click="showSimleTime" v-if="curSimleTime">{{curSimleTime}}年</span>
        <span class="s_buy" id="s_buy" @click="showSimleTime" v-if="!curSimleTime">出厂日期</span>
        <div class="s_buy" id="s_buy" @click="showSimple(false)" v-if="curModels">
          <span :title="curModels.name">{{curModels.name}}</span>
        </div>
        <div class="s_buy" id="s_buy" @click="showSimple(true)" v-if="!curModels">
          <span>选择车型</span>
        </div>
      </div>
      <div class="panel-content" v-if="showStatus.showPinpai">
        <a class="close" id="close_c" @click="closePanel()">关闭</a>
        <div class="pinpaiL">
          <div class="alphabet-list">
            <div class="up" @click="zmListUp"></div>
            <div class="con" ref="zimuList">
              <div class="con_list">
                <ul>
                  <li v-for="item in ppData.zimuList" @click="clickZimu(item)">
                    <a class="pinpai_num">{{item}}</a>
                  </li>
                </ul>
              </div>
            </div>
            <div class="down" @click="zmListDown"></div>
          </div>
  
          <div class="pingpai-list">
            <ul v-for="item in ppData.list" :class="item.id">
              <li v-for="kItem in item.listByZimu" @click="selectPinPai(kItem)" :class="{'active':kItem.b_id === curSelect.b_id}">
                <a>{{item.zimu}} {{kItem.pp_name}}</a>
              </li>
            </ul>
          </div>
  
        </div>
        <div class="pinpaiR">
          <ul v-if="childPP">
            <li v-for="item in childPP">
              <p class="pingpai-title">{{item.header.name}}</p>
              <p class="clearfix p-list">
                <a v-for="kItem in item.itemList" class="series series_657" @click="selectChildPinPai(kItem)" :class="{'active': curChildSelect.id === kItem.id}">{{kItem.name ? kItem.name : '名字未知'}}</a>
              </p>
            </li>
          </ul>
        </div>
      </div>
  
      <div class="panel-content" v-if="showStatus.showTime">
        <a class="close" id="close_c" @click="closePanel()">关闭</a>
        <div class="buy_time">
          <h4>选择生产时间</h4>
          <p class="buy_time_list">
            <a data="2011" class="buy_year buy_year_2011" v-for="item in timeList" @click="selectSimpleTime(item)" :class="{'active': curSimleTime === (item)}">{{item}}年</a>
          </p>
        </div>
      </div>
  
      <div class="panel-content" v-if="showStatus.showCType">
        <a class="close" id="close_c" @click="closePanel()">关闭</a>
        <div style="width: 100%;">
          <div class="gujia_layer" v-if="simpleList">
            <div class="gujia_layer_top pl70">
              <div class="n_kuan_box">
                <div class="n_kuan">
                  <ul id="data_tab6" class="ul_nk">
                    <li v-for="item in simpleList.simple" :class="{'current': item.ver === curSimleTime}" @click="switchSimple(item)">{{item.ver}}款</li>
                  </ul>
                </div>
              </div>
              <span class="wen" id="s_wen"></span>
            </div>
          </div>
  
          <div class="simple_list" v-if="curSimpleList">
            <div class="select_cx clearfix pr" id="data_box6_0">
              <h4 class="bl">选择车型</h4>
              <div class="cx_newP clearfix">
                <p>
                  <b>新车价</b>车型</p>
                <p v-if="curSimpleList.length > 1">
                  <b>新车价</b>车型</p>
                <p v-if="curSimpleList.length <= 1">
                  <b></b>
                </p>
              </div>
              <div class="cx-list">
                <ul>
                  <li v-for="(item, index) in curSimpleList" v-if="index%2 == 0" @click="selectModel(item)">
                    <a class="simple" :title="item.name">{{item.name}}</a>
                    <span v-if="curType !== '3'">{{item.new_price}}万</span>
                    <span v-if="curType === '3'">暂无</span>
                  </li>
                </ul>
                <ul>
                  <li v-for="(item, index) in curSimpleList" v-if="index%2 == 1" @click="selectModel(item)">
                    <a class="simple">{{item.name}}</a>
                    <span v-if="curType !== '3'">{{item.new_price}}万</span>
                    <span v-if="curType === '3'">暂无</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
  
    </div>
  </div>
</template>

<script>
import * as escData from './../../../data/escData.js'
import { Message } from 'element-ui';
export default {
  data() {
    return {
      type: '',
      dispatch: this.$store.dispatch, // 用于vuex值得动态设置
      getter: this.$store.getters,
      curSelect: {},
      childPP: '',
      curChildSelect: {},
      simpleList: '',
      curSimpleList: '',
      curSimleTime: '',
      timeList: [],
      showStatus: {
        showPinpai: false,
        showTime: false,
        showCType: false
      },
      cardTimeStatus: {
        showCardYearStatus: false,
        showCardMonthStatus: false
      },
      curModels: '',
      curShowCityList: [],
      localVimData: '',
      matchStatus: false
    }
  },
  props: {
    ppData: {
      type: Object,
      default: {}
    },
    componentId: {
      type: String,
      default: 'ppDataId'
    },
    curType: {  //标识网站 1车虫网  2车300 3二手车之家
      type: String,
      default: '1'
    },
    title: {
      type: String,
      default: '车虫网'
    },
    selectCondition: {
      type: Object,
      default: {}
    }
  },
  methods: {
    resetData() {
      var _self = this
      _self.curSimleTime = ''
      _self.curChildSelect = ''
      _self.curModels = ''
      this.updateCondition()
    },
    resetData2() {
      var _self = this
      _self.curModels = ''
      this.updateCondition()
    },
    zmListUp() {
      var el = $("#" + this.componentId).find('.panel-content .pinpaiL .alphabet-list .con')
      var pH = el.height();
      var yT = el.offset().top;
      var pT = el.find('.con_list').offset().top;
      var nT = pT - yT + pH;
      if (nT < 1) {
        el.find('.con_list').animate({ top: nT }, 'slow');
      }
    },
    zmListDown() {
      var el = $("#" + this.componentId).find('.panel-content .pinpaiL .alphabet-list .con')
      var pH = el.height();
      var yT = el.offset().top;
      var pT = el.find('.con_list').offset().top;
      var pAH = el.find('.con_list').find('ul').height();
      var nT = pT - yT - pH;
      // console.log('nT = ' + nT + ' pAH = ' + pAH)
      if (pAH + nT > 0) {
        el.find('.con_list').animate({ top: nT }, 'slow');
      }
    },
    clickZimu(item) {
      // console.log(item)
      var toph = $("#" + this.componentId + " .brand_A").offset().top;
      var newtop = $("#" + this.componentId + " .brand_" + item).offset().top - toph;
      var oldt = $("#" + this.componentId + " .pingpai-list").scrollTop();
      var times = oldt > newtop ? oldt - newtop : newtop - oldt;
      times = times > 800 ? 800 : times;
      $("#" + this.componentId + " .pingpai-list").animate({ scrollTop: newtop }, times);
    },
    closePanel() {
      var _self = this
      _self.showStatus = {
        showPinpai: false,
        showTime: false,
        showCType: false
      }
    },
    selectPinPai(item) {
      this.curSelect = item
      this.resetData()
      this.getChildPP()
      this.updateCondition()
    },
    showSelectPinPai() {
      var _self = this
      _self.showStatus = {
        showPinpai: true,
        showTime: false,
        showCType: false
      }
    },
    showSimple(top) {
      var _self = this
      var type = parseInt(_self.curType)
      if (_self.curChildSelect.id && _self.curSimleTime) {
        _self.getChildPPSimple((res) => {
          if (type == 2 || type == 3) {
            for (var i = 0; i < _self.simpleList.length; i++) {
              var cur = _self.simpleList[i]
              // console.log(cur)
              if (cur.model_time === _self.curSimleTime) {
                _self.curSimpleList = cur.itemList
                break
              }
            }
          }
        })
        _self.showStatus = {
          showPinpai: false,
          showTime: false,
          showCType: true
        }
      } else if (_self.curChildSelect.id && !_self.curSimleTime) {
        _self.showSimleTime()
      } else {
        _self.showSelectPinPai()
      }
    },
    showSimleTime() {
      var _self = this
      if (_self.curChildSelect.id) {
        var type = parseInt(_self.curType)
        if (type == 1) {
          var timeList = []
          var launch_year = parseInt(_self.curChildSelect.launch_year)
          var stop_year = parseInt(_self.curChildSelect.stop_year)
          for (var i = stop_year; i >= launch_year; i--) {
            timeList.push(i)
          }
          // console.log(timeList)
          _self.timeList = timeList
        } else if (type == 2 || type == 3) {
          _self.getChildPPSimple()
        }
        _self.showStatus = {
          showPinpai: false,
          showTime: true,
          showCType: false
        }
      } else {
        _self.showSelectPinPai()
      }
    },
    selectChildPinPai(item) {
      var _self = this
      _self.curChildSelect = item
      _self.curSimleTime = ''
      _self.showSimleTime()
      var type = parseInt(_self.curType)
      this.updateCondition()
    },
    selectSimpleTime(time) {
      var _self = this
      _self.curSimleTime = time
      _self.showSimple(true)
      _self.resetData2()
      this.updateCondition()
    },
    selectModel(item) {
      this.curModels = item
      this.closePanel()
      this.updateCondition()
    },
    switchSimple(item) {
      this.curSimpleList = item.list
      this.curSimleTime = item.ver
    },
    getChildPP(callback) {
      var _self = this
      var type = parseInt(_self.curType)

      switch (type) {
        case 1:
          var data = 'b_id=' + _self.curSelect.b_id
          escData.getCcwChildPP(data, _self, (res) => {
            _self.childPP = res.list
            if (typeof callback === 'function') {
              callback(res)
            }
          })
          break;
        case 2:
          var data = _self.curSelect.b_id
          escData.getCthChildPP(data, _self, (res) => {
            _self.childPP = res
            if (typeof callback === 'function') {
              callback(res)
            }
          })
          break;
        case 3:
          var data = _self.curSelect.b_id
          escData.getCFChildPP(data, _self, (res) => {
            _self.childPP = res
            if (typeof callback === 'function') {
              callback(res)
            }
          })
          break;
      }
    },
    getChildPPSimple(callback) {
      var _self = this
      var type = parseInt(_self.curType)
      switch (type) {
        case 1:
          var type = parseInt(_self.curType)
          var data = 'ser_id=' + _self.curChildSelect.id + '&byear=' + _self.curSimleTime
          escData.getCcwChildPPSimple(data, _self, (res) => {
            _self.simpleList = res
            _self.curSimpleList = res.simple[0].list
            _self.curSimleTime = res.simple[0].ver
          })
          break;
        case 2:
          var data = _self.curChildSelect.id
          _self.timeList = []
          escData.getCthChildPPSimple(data, _self, (res) => {
            // console.log(res)
            _self.timeList = res.timeLsit
            _self.simpleList = res.list
            if (typeof callback === 'function') {
              callback(res)
            }
          })
          break;
        case 3:
          var data = _self.curChildSelect.id
          _self.timeList = []
          escData.getCFChildPPSimple(data, _self, (res) => {
            // console.log(res)
            _self.timeList = res.timeLsit
            _self.simpleList = res.list
            if (typeof callback === 'function') {
              callback(res)
            }
          })
          break;
      }
    },
    updateCondition() {
      var _self = this
      var condition = {
        type: _self.curType,
        curSimleTime: _self.curSimleTime,
        curSelect: _self.curSelect,
        curChildSelect: _self.curChildSelect,
        curModels: _self.curModels
      }
      _self.$emit('get-search-condition', condition)
    },
    setCondition(val) {
      // console.log(val)
      var _self = this
      _self.type = val.type
      _self.curSimleTime = val.curSimleTime,
        _self.curSelect = val.curSelect,
        _self.curChildSelect = val.curChildSelect,
        _self.curModels = val.curModels
    },
    setCommonConditionToNull () {
      this.$emit('set-common', '')
    }
  },
  mounted() {
    var _self = this
    var timer = setInterval(() => {
      if (_self.ppData.list) {
        _self.$mathchData.initMatch(_self, _self.curType)
        clearInterval(timer)
      }
    }, 50)
  },
  watch: {
    curSelect: function (val) {
      this.curSelect = val
    },
    ppData: function (val) {
    },
    distance: function (val) {
      this.distance = val
      this.updateCondition()
    },
    selectCondition: function (val) {
      // console.log(val)
      this.setCondition(val)
    }
  }
}
</script>


<style lang="less">
@import './ccwSelect.less';
</style>
